<!DOCTYPE html>
<html lang="en">
<head>
    <title>Places Dave Has Lived</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--meta data for sharing links on Facebook-->
    <meta property="og:title" content="Places I've Lived"/>
    <meta property="og:url" content="https://davedanner04.github.io/StoryMap/index.html"/>
    <meta property="og:description" content="This is an example of a storymap."/>
    <meta property="og:image" content="../../img/social.png"/>

    <!--add required stylesheets-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!--leaflet css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">


    <!--add favicon for the web page-->
  <link rel="shortcut icon" href="assets/img/dave.ico" type="image/x-icon">

    <!--Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="dist/storymap.2.5.css">
    <!--add required libraries-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
    <!--jquery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

    <!--boostrap-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--leaflet.ajax for asynchronously adding geojson data-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>

    <!--mini globle map-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script src="js/globeminimap.js"></script>

    <!--story map plugin-->
    <script src="dist/storymap.2.5.js"></script>
</head>
<body>

<div id="storymap" class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-md-4 storymap-story">
            <section data-scene="overview" data-background="assets/img/begin.jpg">
                <div class="fullscreen text-center">

                    <h1 class="display-4 d-flex justify-content-center" style="color: rgba(0,0,0,1)">Places I've Lived</h1>


                    <small class="d-flex justify-content-center" style="color: rgba(0,0,0,1)">
                        By Dave Danner
                    </small>
                </div>
            </section>
            <section data-scene="oc">
                <h2>Oregon City</h2>
            I lived here from 1995 to 2014


            </section>

            <section data-scene="k">
                <h2>Kenosha WI</h2>
    This is where I went to school for two years
              </section>

            <section data-scene="corv">
                <h2>Corvallis OR</h2>
            This is where I currently live.
            </section>

            <section data-scene="end" data-background="assets/img/end.jpg" style=height: "450px;">
                <div class="fullscreen text-center">
                    <h1 class="display-4 d-flex justify-content-center">Where will I live next??? </h1>
                </div>
            </section>

        </div>
        <!--map div-->
        <div class="col-sm-6 col-md-8 storymap-map"></div>
    </div>


    <dl>
        <dt>
            <!--facebook icon-->
            <a class="fab fa-facebook-square btn"
               href="https://facebook.com/sharer.php?u=https://https://davedanner04.github.io/StoryMap/index.html"
               target="_blank"></a>
        </dt>
        <dt>
            <!--facebook icon-->
            <a class="fab fa-github btn" href="https://github.com/davedanner04/StoryMap" style="top:40px"
               target="_blank"></a>
        </dt>
        <dt>
            <!--info icon-->
            <i class="fas fa-info-circle btn" style="top:60px" data-toggle="modal" data-target="#info-modal"></i>
        </dt>
    </dl>

    <!--the info page-->
    <div class="modal fade" id="info-modal" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">About</h4>
                </div>
                <div class="modal-body">
                    <p>This is a webmap of the places I've lived. I made it for the class
                        Web Mapping provided by Oregon State University. The story map library is derived from the
                        storymap plugin for leaflet at <a>http://atlefren.github.io/storymap/</a>, and its functionality
                        relies on both leaflet and Boostrap.</p>
                    <p><b>storymap.js</b> | Released Date: 02/20/2017 | Version: 2.5 | MIT License </p>
                    <p><b>Author: Dave Danner</b> | College of Earth, Ocean, Atmospheric Science | Oregon State University
                    </p>

                    <p>The favicon image was acquired from an open source search of Google.</p>
                    <p>This story map uses geospatial data from mapbox.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- main javascript -->
<script type="text/javascript">
    var layers = {
      layer1: { layer: L.tileLayer('https://api.mapbox.com/styles/v1/uncledave/cjt0z0ql505h91fnc4567p2sv/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoidW5jbGVkYXZlIiwiYSI6ImNqcnFqdGl0ejFwanE0M2xheXhvMzV1aXIifQ.8G7fTyYuKQJ1JS3HJSQYyA')},
    };
    var scenes = {
        overview: {lat: 44.0000000, lng: -123.5000000, zoom: 1, layers: [], name: 'Cover Page'},
        oc: {lat: 45.334, lng: -122.609, zoom: 11.0, layers: [layers.layer1], name: "Oregon City"},
        k: {lat: 42.583, lng: -87.82, zoom: 12, layers: [layers.layer1], name: "Kenosha"},
        corv: {lat: 44.56, lng: -123.27, zoom: 12.00, layers: [layers.layer1], name: "Corvallis"},
        end: {lat: 44.0000000, lng: -123.5000000, zoom: 7, layers: [], name: 'The End'}
    };
    $('#storymap').storymap({
        scenes: scenes,
        baselayer: layers.layer1,
        legend: false, // if you do not want a legend feature, you can simply not define the createLegend function.
        credits: "Created by Dave Danner",
        loader: true,
        scalebar: true,
        flyto: true,
        navwidget: true,
        createMap: function () {
            // create a map in the "map" div, set the view to a given place and zoom
            var map = L.map($(".storymap-map")[0], {
                zoomControl: false, scrollWheelZoom: false, fadeAnimation: true,
                zoomAnimation: true
            }).setView([44, -120], 10);
            //add an miniglobe
            new L.Control.GlobeMiniMap({
                marker: 'red',
                position: 'bottomright'
            }).addTo(map);
            return map;
        }
    });
</script>
</body>
</html>
